<template>
<div class="configtab">
  <div class="el-tabs__content">
    <el-form size="small" label-position="top" ref="form" style="margin-top: 20px;" :model="component">
      <el-form-item label="大屏标题">
        <el-input v-model="component.display.name"></el-input>
      </el-form-item>
      <el-form-item label="宽度">
        <el-input v-model="component.width" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="高度">
        <el-input v-model="component.height" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="比例">
        <el-input v-model="component.scale" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="网格间距">
        <el-input v-model="component.grid"></el-input>
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="component.display.globalColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="背景图片">
        <el-upload
          class="avatar-uploader"
          :headers="uploadheader"
          :action="uploadaction"
          :show-file-list="false"
          name="multipartFile"
          :on-success="handleBackImgSuccess"
        >
          <img v-if="component.display.backImg" :src="component.display.backImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="el-upload__tip" slot="tip">请上传1920 * 1080比例的jpg/png背景图片</div>
        </el-upload>
       </el-form-item>
      <el-form-item style="text-align:center">
        <el-button type="primary" @click="submit" >修改基本信息</el-button>
      </el-form-item>
    </el-form>
  </div>
  
</div>
  
</template>
<script>
import echarts from 'echarts'
import API from '@/services/api'
import Util from '@/libs/util'
export default {
  name: 'BaseConfig',
  data(){
    return{
      uploadaction : API.displays.upload,
      uploadheader: {
        Authorization: Util.getStore('token')
      },
    }
  },
  props: {
    component: Object
  },
  methods: {
    submit(){
      this.$emit('handleUpdateDisplay', this.component.display)
    },
    handleBackImgSuccess(e) {
      if(e.code === 0) {
        this.$emit('handleUpdateDisplayImg', e.filePath)
      }
    },
  }
}
</script>
<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 260px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 260px;
  height: 150px;
  display: block;
}
</style>